<template>
  <div></div>
</template>

<script>
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min'

export default {
  name: 'ElevenThree',
  data() {
    return {
      cube: null,                     // 立方体对象
      parentCubeMaterial: null,       // 父立方体材质
      eventObj: {
        // 全屏
        fullScreen: function() {
          document.body.requestFullscreen();
        },
        // 退出全屏
        exitFullScreen: function() {
          document.exitFullscreen();
        },
        // 立方体颜色
        cubeColor: "#ff0000",
      }
    }
  },
  mounted() {
    this.initScene();
    this.initCamera();
    this.initRenderer();
    this.addCube();
    this.addAxesHelper();
    this.addOrbitControls();
    this.animation();
    this.initControl();
  },
  methods: {
    // 初始化场景
    initScene() {
      this.scene = new THREE.Scene();
    },
    // 初始化相机
    initCamera() {
      // 创建一个相机 视点
      this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
      // 设置相机的位置
      this.camera.position.x = 2;
      this.camera.position.y = 2;
      this.camera.position.z = 5;
      this.camera.lookAt(0, 0, 0);
    },
    // 初始化渲染器
    initRenderer() {
      // 创建一个渲染器
      this.renderer = new THREE.WebGLRenderer();
      // 设置渲染器尺寸
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(this.renderer.domElement);
    },
    // 添加一个立方体
    addCube() {
      const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
      const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
      this.parentCubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

      this.cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
      let parentCube = new THREE.Mesh(cubeGeometry, this.parentCubeMaterial);

      // 将子元素添加到父元素里
      parentCube.add(this.cube);
      parentCube.position.set(-3, 0, 0);
      this.cube.position.set(3, 0, 0);

      // 设置父元素旋转
      parentCube.rotation.x = Math.PI / 4;
      // 设置子元素旋转
      this.cube.rotation.x = Math.PI / 4;

      // 添加父元素到场景里
      this.scene.add(parentCube);
    },
    // 添加世界坐标辅助器
    addAxesHelper() {
      const axesHelper = new THREE.AxesHelper(50);
      this.scene.add(axesHelper);
    },
    // 添加轨道控制器
    addOrbitControls() {
      this.orbitControls = new OrbitControls(this.camera, this.renderer.domElement);
      // 设置带阻尼的惯性
      this.orbitControls.enableDamping = true;
      // 设置阻尼系数
      this.orbitControls.dampingFactor = 0.05;
    },
    // 动画函数
    animation() {
      this.orbitControls.update();
      // 渲染
      this.renderer.render(this.scene, this.camera);
      requestAnimationFrame(this.animation);
    },
    // 初始化lil.gui调试工具
    initControl() {
      const gui = new GUI();

      // 控制全屏、退出全屏
      gui.add(this.eventObj, "fullScreen").name('全屏');
      gui.add(this.eventObj, "exitFullScreen").name('退出全屏');

      // 控制立方体的位置
      let folder = gui.addFolder('立方体位置');
      folder.add(this.cube.position, 'x', -10, 10).step(1).name('立方体x轴位置')
      folder.add(this.cube.position, 'y', -10, 10).step(1).name('立方体y轴位置')
      folder.add(this.cube.position, 'z', -10, 10).step(1).name('立方体z轴位置')

      // 控制父立方体是否线框模式
      folder.add(this.parentCubeMaterial, 'wireframe').name('父元素线框模式')

      // 控制立方体颜色
      folder.addColor(this.eventObj, 'cubeColor').name('立方体颜色').onChange(val => {
        this.cube.material.color.set(val);
      })
    }
  }
}
</script>

<style scoped>

</style>
